<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Vue-GeoJSON</title>
    <script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
    <style type="text/css">
      #main {
          margin: 0 0;
          width: 100%;
          height: 100vh;
      }
      #map {
          height: 100vh;
          width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <mapgis-web-map
        id="map"
        :map-style="mapStyle"
        :zoom="mapZoom"
        :center="outerCenter"
        :crs="mapCrs"
        v-on:load="handleMapLoad"
        >
        <mapgis-ogc-wmts-layer
          :layer-id="layerWmtsId"
          :source-id="sourceWmtsId"
          :base-url="wmtsurl"
          :tile-matrix-set="tileMatrixSet"
          :wmts-layer="layer"
          :format="format"
          :token="token"
        >
        </mapgis-ogc-wmts-layer>
        <mapgis-image-layer
          :source-id="imageSourceId"
          :source="imageSource"
          :layer-id="imageLayerId"
          :layer="imageLayer">
        </mapgis-image-layer>
      </mapgis-web-map>
    </div>
    <script>
      new Vue({
          el: '#app',
          data() {
              return {
                  mapStyle: {
                      version: 8,
                      sources: {},
                      layers: []
                  },
                  mapZoom: 5,
                  outerCenter: [116.3, 40.5],
                  mapCrs: 'EPSG:4326',

                  layerWmtsId: 'ogcwmts_layerId',
                  sourceWmtsId: 'ogcwmts_sourceId',
                  wmtsurl: 'http://t0.tianditu.gov.cn/vec_c/wmts',
                  layer:"vec",
                  tileMatrixSet:"c",
                  format:"tiles",
                  token: {
                            key: 'tk',
                            value: 'f5347cab4b28410a6e8ba5143e3d5a35'
                        },

                  imageSourceId: 'imagesourceid',
                  imageSource: {
                      type: 'image',
                      url: '../../static/data/picture/imagelayer.png',
                      coordinates: [
                          [108.7381, 45.6339],
                          [126.0011, 45.6339],
                          [126.0011, 34.2583],
                          [108.7381, 34.2583]
                      ]
                  },
                  imageLayerId: 'imagelayerid',
                  imageLayer: {
                      'source': 'imagesourceid',
                      'type': 'raster',
                      'paint': { 'raster-opacity': 0.85 }
                  }
              };
          },
          methods: {
              handleMapLoad(payload) {
                  this.map = payload.map;
              }
          }
      });
    </script>
  </body>
</html>
